<style lang="scss">
.nav-breadcrumb-header,
.tablelist-header {
    display: block;
	font-size: 13px;
	background-color: #fff;
	padding: 12px 16px;
	border-bottom: 1px solid #ddd;
	margin: 0 -10px 6px -12px;
}
</style>

<template>
	<Breadcrumb class="nav-breadcrumb-header" v-if="datalist.length">
		<BreadcrumbItem
			v-for="(item,index) in datalist"
			:key="index"
			v-bind="item"
		>{{$ct(item.langKey,{defaultValue:item.title})}}</BreadcrumbItem>
	</Breadcrumb>
</template>

<script>
import {
	mapState
} from 'vuex'
export default {
	props: ['data'],
	computed: {
		...mapState('layout', ['menuList']),
		getBreadsList() {
			return this.$store.getters['layout/getRouteTitleList'](this.$route.path);
		},
		datalist() {
			const data = this.data || this.getBreadsList;
			if (!data.length) return this.getCustomeLangKey || this.fallback;
			return data;
		},
		getCustomeLangKey() {
			const langKey = this.$route.meta.langKey;
			if (Array.isArray(langKey) && langKey.length > 0) {
				return langKey.map(item => {
					return item instanceof Object ? item : {
						langKey: item
					}
				})
			}
		},
		fallback() {
			const path = this.$route.path.replace(/\/(update\/|detail|add|query|edit)[\/\w_-]+$/i, '');
			const data = Object.values(this.menuList).find((item) => {
				const {
					props,
					linklistId,
					validate
				} = item;
				if (!props || linklistId || !validate) return;
				const to = props.to || '';
				return to && to.indexOf(path) == 0;
			});

			return data ? [{
				langKey: data.langKey,
				title: data.title,
				to: (data.props || {}).to,
				href: (data.props || {}).href
			}, ...this.getDefault] : this.getDefault;
		},
		getDefault() {
			const path = this.$route.path;
			if (path.indexOf('/edit') > 1) {
				return [{
					langKey: 'global.common.edit',
					title: '编辑'
				}]
			}
			if (path.indexOf('/query') > 1 || path.indexOf('/detail') > 1) {
				return [{
					langKey: 'global.common.query',
					title: '查看'
				}]
			}
			if (path.indexOf('/add') > 1) {
				return [{
					langKey: 'global.common.add',
					title: '添加'
				}]
			}
			return [{
				langKey: 'global.common.list',
				title: '列表'
			}]
		},
	},
}
</script>
